<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
    <link rel="stylesheet" href="__PUBLIC__/js/bootstrapvalidator/css/bootstrapValidator.min.css" />
	<link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload.css" />
	<link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload-ui.css" />
 	<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/vendor/jquery.ui.widget.js"></script>
 	<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload.js"></script>
 	<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-ui.js"></script>
 	<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.iframe-transport.js"></script>
 	<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-process.js"></script>
 	<script type="text/javascript" src="__PUBLIC__/js/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
</head>
<body>
	<div class="modal-dialog" role="document" style="width:800px;">
	    <div class="modal-content">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	            <h4 class="modal-title" id="exampleModalLabel"><if condition="$id">修改楼宇<else/>添加楼宇</if></h4>
	        </div>
			<ul id="myTab" class="nav nav-tabs" style="margin-top: -1px;">
				<li class="active">
					<a href="#baseTab" data-toggle="tab">
						基础信息
					</a>
				</li>
				<li><a href="#propTab" data-toggle="tab">产权信息</a></li>
			</ul>
	        <form class="form-horizontal" style="padding:4%;height:500px;overflow-y:auto;" id="houseForm">
	        	<input type="hidden" name="id" value="{$id}"/>
				<div class="tab-content">
					<div class="tab-pane in active" id="baseTab">
						<div class="form-group">
							<label class="control-label col-sm-2">所属商圈:</label>
							<div class="col-sm-4">
								<select class="form-control" name="trade_id">
									<option value="" <if condition="$house['trade_id'] eq ''">selected</if>>请选择</option>
									<foreach name="tradeList" item="trade">
										<option value="{$trade.id}" <if condition="$house['trade_id'] eq $trade['id']">selected</if>>{$trade.name}</option>
									</foreach>
								</select>
							</div>
							<label class="control-label col-sm-2">楼宇名称:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="name" value="{$house.name}" placeholder="请输入楼宇名称">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">所属街道:</label>
							<div class="col-sm-4">
								<select class="form-control" name="org_id">
									<foreach name="orgList.rows" item="org">
										<if condition="$org.pid eq 0">
											<optgroup label="{$org.name}"></optgroup>
											<else/>
											<option value="{$org.id}" <if condition="$house['org_id'] eq $org['id']">selected</if>>{$org.name}</option>
										</if>
									</foreach>
								</select>
							</div>
							<label class="control-label col-sm-2">用地性质:</label>
							<div class="col-sm-4">
								<select class="form-control" name="use_type">
									<option value="1" <if condition="$house.use_type eq 1">selected</if>>商业用地</option>
									<option value="2" <if condition="$house.use_type eq 2">selected</if>>住宅用地</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">注册类型:</label>
							<div class="col-sm-4">
								<select class="form-control" name="enroll_type">
									<option value="1" <if condition="$house.enroll_type eq 1">selected</if>>国有企业</option>
									<option value="2" <if condition="$house.enroll_type eq 2">selected</if>>私营企业</option>
								</select>
							</div>
							<label class="control-label col-sm-2">注册资金:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="enroll_capital" value="{$house.enroll_capital}" placeholder="请输入注册资金">
									<div class="input-group-addon">&yen;</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">楼层总数:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="floor" value="{$house.floor}" placeholder="请输入楼层总数">
									<div class="input-group-addon">层</div>
								</div>
							</div>
							<label class="control-label col-sm-2">楼宇编码:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="code" value="{$house.code}" placeholder="请输入楼宇编码">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">建筑面积:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="area" value="{$house.area}" placeholder="请输入建筑面积">
									<div class="input-group-addon">M&sup2;</div>
								</div>
							</div>
							<label class="control-label col-sm-2">使用面积:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="area_use" value="{$house.area_use}" placeholder="请输入使用面积">
									<div class="input-group-addon">M&sup2;</div>
								</div>
							</div>
						</div>
						<!-- div class="form-group">
							<label class="control-label col-sm-2">商务面积:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="available_area" value="{$house.available_area}" placeholder="请输入商务面积">
									<div class="input-group-addon">M&sup2;</div>
								</div>
							</div>
							<label class="control-label col-sm-2">空置面积:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="free_area" value="{$house.free_area}" placeholder="请输入空置面积">
									<div class="input-group-addon">M&sup2;</div>
								</div>
							</div>
						</div-->
						<div class="form-group">
							<label class="control-label col-sm-2">标准层高:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="floor_height" value="{$house.floor_height}" placeholder="请输入标准层高">
									<div class="input-group-addon">M</div>
								</div>
							</div>
							<label class="control-label col-sm-2">是否有效:</label>
							<div class="col-sm-4">
								<select class="form-control" name="status">
									<option value="1" <if condition="$house.status eq 1">selected</if>>有效</option>
									<option value="0" <if condition="$house.status neq '' && $house.status eq 0">selected</if>>无效</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">得房率:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<input type="text" class="form-control" name="construction_ratio" value="{$house.construction_ratio}" placeholder="请输入得房率">
									<div class="input-group-addon">%</div>
								</div>
							</div>
							<label class="control-label col-sm-2">电梯数量:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="lifts" value="{$house.lifts}" placeholder="请输入电梯数量">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">开发商:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="developers" value="{$house.developers}" placeholder="请输入开发商名称">
							</div>
							<label class="control-label col-sm-2">物业公司:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="property" value="{$house.property}" placeholder="请输入物业公司">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">联系人:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="contacts" value="{$house.contacts}" placeholder="请输入联系人名称">
							</div>
							<label class="control-label col-sm-2">联系电话:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="contact_phone" value="{$house.contact_phone}" placeholder="请输入联系电话">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">停车位:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="parking_num" value="{$house.parking_num}" placeholder="请输入楼宇停车位">
							</div>
							<label class="control-label col-sm-2">邮政编码:</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="zip_code" value="{$house.zip_code}" placeholder="请输入邮政编码">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">坐落地址:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="position" value="{$house.position}" placeholder="请输入楼宇地址">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">经纬度:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="longitude" id="longitude" value="<if condition="$house.longitude gt 0">{$house.longitude|number_format=7}</if>" style="float:left;width:35%;">
								<input type="text" class="form-control" name="latitude" id="latitude" value="<if condition="$house.latitude gt 0">{$house.latitude|number_format=7}</if>" style="float:left;width:35%;margin-left: 20px;">
								<button type="button" id="lat_lng" class="btn btn-primary" style="margin-left: 10px;">获取经纬度</button>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">楼宇介绍:</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="5" name="description">{$house.description}</textarea>
							</div>
						</div>
						<!--<div class="form-group">
							<label class="control-label col-sm-2">公交信息:</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" name="bus_info">{$house.bus_info}</textarea>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">地铁信息:</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" name="metro_info">{$house.metro_info}</textarea>
							</div>
						</div>-->
						<div class="form-group">
							<label class="control-label col-sm-2">交通信息:</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" name="metro_station_info">{$house.metro_station_info}</textarea>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-2">图片:</label>
							<div class="col-sm-10">
							<span class="btn btn-primary fileinput-button">
								<i class="glyphicon glyphicon-plus"></i>
								<span>选择文件</span>
								<!-- The file input field used as target for the file upload widget -->
								<input id="fileupload" type="file" name="files[]" multiple>
							</span>
								<!-- The container for the uploaded files -->
								<div id="files" class="files">
									<foreach name="house.attachment" item="attache">
										<img src="__ROOT__{$attache.attachment}" style="width:60px;height:60px;margin:10px;" onclick="removeImg(this,'{$attache.id}')">
									</foreach>
								</div>
								<input type="hidden" name="attache" id="attache" value=""/>
								<input type="hidden" name="removed" id="removed" value=""/>
							</div>
						</div>
					</div>
					<include file="prop" />
				</div>

            	<input type="hidden" name="token" value="{$formToken}">
	        </form>
	        <div class="modal-footer">
	            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
	            <button type="button" id="save" class="btn btn-primary">保存</button>
	        </div>
	    </div>
	</div>

	<div id="prop_template" style="display:none;">
		<div>
			<div class="form-group">
				<label class="control-label col-sm-2">产权单位:</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="prop_unit_name[]" value="" placeholder="请输入产权单位">
				</div>
				<button type="button" class="btn btn-primary" style="margin-left: 10px;" onclick="delProp(this)">删除</button>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">楼层范围:</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="prop_description[]" value="" placeholder="请输入楼层范围">
				</div>
				<label class="control-label col-sm-2">产权面积:</label>
				<div class="col-sm-4">
					<div class="input-group">
						<input type="text" class="form-control" name="prop_area[]" value="" placeholder="请输入产权面积">
						<div class="input-group-addon">M&sup2;</div>
					</div>
				</div>
			</div>
			<hr />
		</div>
	</div>
    
    <div class="modal fade" id="modal_map"></div>
	<script type="text/javascript">
		var attache = [];
		var removed = [];
		var webRoot = "__ROOT__";
		$(function(){
			$('#fileupload').fileupload({
 		        url: "{:U('Admin/Upload/index')}",
 		        dataType: "json",
 		       	formData: {type:"house"},
 		       	autoUpload: true,
 		       	singleFileUploads: false,
 		        done: function (e, data) {
 		        	var files = data.result;
 		        	for(var i=0;i<files.length;i++){
 		        		var file = files[i];
 		        		attache.push(file.attachement_id);
 		        		var item = '<img src="'+webRoot+file.filePath+'" style="width:60px;height:60px;margin:10px;" onclick="removeImg(this,\''+file.attachement_id+'\')">'
			            $(item).appendTo('#files');
 		        	}
 		        }
 		    });
			$("#save").bind("click",doSave);
			$("#lat_lng").bind("click",showMap);
		});
		
		var commitFlag = false;
		function doSave(){
			if(commitFlag){
				common.alert("提示","请勿重复提交");
				return;
			}
			commitFlag = true;
			if(!validateForm()){
				commitFlag = false;
				return false;
			}
			if($("#files").children("img").length == 0){
				if(attache.length == 0){
					commitFlag = false;
					common.alert("提示","请至少上传一张图片!");
					return false;
				}
			}
			$("#attache").val(attache.toString());
			$("#removed").val(removed.toString());
			$.ajax({
                url: "{:U('Admin/House/doSave')}",
                type: "post",
                dataType: "json",
                data: $("#houseForm").serialize(),
                success: function (data) {
                    if(data.status){
                    	common.alert("提示",data.msg,function(){
                            common.reload();
                        });
                    }else{
                    	commitFlag = false;
                    	common.alert("提示",data.msg);
                    }
                }
            });
		}
		
		function showMap(){
			var param = {
				longitude:$("#longitude").val(),
				latitude:$("#latitude").val(),
			};
			common.htmlAjax("{:U('Admin/House/map')}", param, function (html) {
                $("#modal_map").append(html);
                $("#modal_map").modal('show');
            });
		}
		
		function removeImg(obj,id){
			removed.push(id);			
			$(obj).remove();
			attache.remove(id);
		}
		
		function addProp() {
			$("#propTab").append($("#prop_template").html());
        }
		
		function validateForm(){
			$('#houseForm').bootstrapValidator({
				feedbackIcons: {
            　　　　　　　　		valid: 'glyphicon glyphicon-ok',
            　　　　　　　　		//invalid: 'glyphicon glyphicon-remove',
            　　　　　　　　		validating: 'glyphicon glyphicon-refresh'
        　　　　　　　　 	},
                excluded:[":disabled"],
	            fields: {
	            	name: {
	                    validators: {
	                        notEmpty: {
	                            message: '楼宇名称不能为空'
	                        }
	                    }
	                },
                    trade_id: {
                        validators: {
                            notEmpty: {
                                message: '所属商圈不能为空'
                            }
                        }
                    },
//	                zip_code: {
//	                    validators: {
//	                        notEmpty: {
//	                            message: '邮政编码不能为空'
//	                        },
//	                        stringLength: {
//	                            min: 6,
//	                            max: 6,
//	                            message: '邮政编码必须为6位'
//	                        },
//	                        numeric: {
//	                        	message: '邮政编码必须为数字'
//	                        }
//	                    }
//	                },
	                enroll_capital: {
	                	validators: {
		                	notEmpty: {
	                            message: '注册资金不能为空'
	                        },
	                        numeric: {
	                        	message: '注册资金必须为数字'
	                        }
	                	}
	                },
	                contacts: {
						validators: {
		                	notEmpty: {
	                            message: '联系人名称不能为空'
	                        }
	                	}
	                },
	                contact_phone: {
						validators: {
		                	notEmpty: {
	                            message: '联系电话不能为空'
	                        }
	                	}
	                },
	                position: {
						validators: {
		                	notEmpty: {
	                            message: '坐落地址不能为空'
	                        }
	                	}
	                },
	                floor: {
						validators: {
		                	notEmpty: {
	                            message: '楼层总数不能为空'
	                        }
	                	}
	                },
	                prop_unit: {
						validators: {
		                	notEmpty: {
	                            message: '产权单位不能为空'
	                        }
	                	}
	                },
	                area: {
						validators: {
		                	notEmpty: {
	                            message: '建筑面积不能为空'
	                        },
	                        numeric: {
	                        	message: '建筑面积必须为数字'
	                        }
	                	}
	                },
                    area_use: {
                        validators: {
                            notEmpty: {
                                message: '使用面积不能为空'
                            },
                            numeric: {
                                message: '使用面积必须为数字'
                            }
                        }
                    },
	                floor_height: {
						validators: {
		                	notEmpty: {
	                            message: '标准层高不能为空'
	                        },
	                        numeric: {
	                        	message: '标准层高必须为数字'
	                        }
	                	}
	                },
	                construction_ratio: {
						validators: {
		                	notEmpty: {
	                            message: '得房率不能为空'
	                        },
	                        numeric: {
	                        	message: '得房率必须为数字'
	                        }
	                	}
	                },
                    "prop_unit_name[]": {
                        validators: {
                            notEmpty: {
                                message: '产权单位不能为空'
                            }
                        }
                    },
                    "prop_description[]": {
                        validators: {
                            notEmpty: {
                                message: '楼层范围不能为空'
                            }
                        }
                    },
                    "prop_area[]": {
                        validators: {
                            notEmpty: {
                                message: '产权面积不能为空'
                            },
                            numeric: {
                                message: '产权面积必须为数字'
                            }
                        }
                    }
	            }
	        });
            var data = $('#houseForm').data('bootstrapValidator');
		    if (data) {
		        data.validate();
		        if (!data.isValid()) {
		            return false;
		        }
		    }
		    return true;
		}
	</script>
</body>
</html>